<template>
  <div class="home">
    <!-- 标签页 -->
    <van-tabs v-model="activeName"
              animated
              sticky
              swipeable
              @change="handleTabs">
      <van-tab v-for="(item, index) in tagsBar"
               :key="index"
               :title="item.title"
               :name="item.linkTo">
        <router-view />
      </van-tab>
    </van-tabs>
    <TabBar />
  </div>
</template>

<script>
import TabBar from '../../components/TabBar'
export default {

  name: 'home',
  data () {
    return {
      activeName: 'hot',
      tagsBar: [
        {
          title: '热门',
          linkTo: 'hot',
        },
        {
          title: '女装',
          linkTo: 'dress',
        }, {
          title: '鞋包',
          linkTo: 'shoeBag',
        }
        // ,
        // {
        //   title: '百货',
        //   linkTo: 'hot1',
        // },
        // {
        //   title: '男装',
        //   linkTo: 'hot2',
        // },
        // {
        //   title: '母婴',
        //   linkTo: 'hot3',
        // },
        // {
        //   title: '食品',
        //   linkTo: 'hot4',
        // }
      ]
    }
  },
  created () {
    /* 解决点击到商品明细页面后再返回的bug */
    this.activeName = this.$route.name;
  },
  components: {
    TabBar
  },
  methods: {
    // eslint-disable-next-line
    handleTabs (name, title) {
      // console.log(name, title);
      this.activeName = name;
      this.$router.replace({
        name: name
      });
    }
  }
}
</script>

<style scoped lang="css">
.home {
  height: 100vh;
  background-color: #fff;
}
img {
  display: block;
  width: 100%;
  height: 400px;
}
</style>
